<template>
  <div class="mybox">
    <div class="itembox">
      <div class="toptitle">
        <div class="topnum">22</div>
        <div class="topunit">亿美元</div>
      </div>
      <div class="centerbg"></div>
      <div class="btmbg">
        <div class="btmtitle">实际使用外资</div>
        <div class="btmvalues">
          <div class="box" :class="[checkSigns(222)]"></div>
          <div class="btmvalue" :class="[checkSign(222)]">222%</div>
        </div>
      </div>
    </div>
    <div class="itembox">
      <div class="toptitle">
        <div class="btmvalue" :class="[checkSign(222)]">29%</div>
      </div>
      <div class="centerbg bg1"></div>
      <div class="btmbg ">
        <div class="btmtitle"> 实际使用外资占全省比重</div>

        <!-- <div class="btmvalues">
          <div class="box" :class="[checkSigns(222)]"></div>
          <div class="btmvalue" :class="[checkSign(222)]">222%</div>
        </div> -->
      </div>
    </div>
    <div class="itembox">
      <div class="toptitle">
        <div class="topunit">弟</div>
        <div class="topnum" style="margin-left: 5px;">3</div>
        <div class="topunit">名</div>
      </div>
      <div class="centerbg bg2"></div>
      <div class="btmbg">
        <div class="btmtitle">实际使用外资占全省排名</div>
        <!-- <div class="btmvalues">
          <div class="box" :class="[checkSigns(222)]"></div>
          <div class="btmvalue" :class="[checkSign(222)]">222%</div>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {}
  },
  methods: {
    checkSigns (numStr) {
      const num = parseFloat(numStr)
      return num >= 0 ? 'red' : 'green'
    },
    checkSign (numStr) {
      const num = parseFloat(numStr)
      return num >= 0 ? 'pos' : 'neg'
    }
  }
}
</script>
<style lang="scss" scoped>
.mybox {
  display: flex;
  justify-content: space-around;

  .itembox {
    width: 114px;
    margin-top: 20px;

    .btmvalue {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 16px;
      margin-top: 5px;

      &.pos {
        color: #FE3D3D;
      }

      &.neg {
        color: #03f842;
      }
    }

    .toptitle {
      display: flex;
      justify-content: center;

      .topnum {
        font-family: YouSheBiaoTiHei;
        font-size: 24px;
        color: #FFDE00;
      }

      .topunit {
        font-family: MicrosoftYaHeiUI;
        font-size: 14px;
        color: #FFFFFF;
        margin-left: 5px;
        margin-top: 6px;
      }
    }

    .centerbg {
      width: 114px;
      height: 114px;
      background: url('./img/1.png');
    }

    .bg1 {
      background: url('./img/2.png');
    }

    .bg2 {
      background: url('./img/3.png');
    }

    .btmbg {
      width: 120px;
      height: 59px;
      background: url('./img/4.png');
      padding-top: 10px;

      .btmtitle {
        font-family: MicrosoftYaHeiUI;
        font-size: 16px;
        color: #FFFFFF;
        text-align: center;
      }

      .btmvalues {
        display: flex;
        justify-content: center;



        .box {
          width: 10px;
          height: 16px;
          margin-right: 5px;
          margin-top: 8px;

          &.red {
            background: url('./img/bgc.png')no-repeat center center;
            background-size: 100% 100%;
          }

          &.green {
            background: url('./img/bgc1.png')no-repeat center center;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>
